<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>Document</title>
</head>
<body>
    <div class="logintitle">
        <img src="./img/z_logo.png" alt="游侠客logo" class="bg1">
        <p class="w1">手机号注册/登录</p>
    </div>
    <div class="ipt1">
        <input class="ipt" id="phone" type="text" placeholder="请输入手机号">
        <div class="error-message" id="phoneError"></div>
        
       
        <input class="ipt" id="code" type="text" placeholder="请输入验证码">
        <p class="w5" id="getCodeBtn">获取验证码</p>
        <div class="error-message" id="codeError"></div>
    </div>
    <button class="w2" id="loginBtn" disabled>一键注册/登录</button>
    <div class="loginway">
        <p class="w3">非大陆手机号登录</p>
        <p class="w3">账号密码登录</p>
    </div>
    <div class="logincon">
        <div class="logincon2">
            <img src="./img/z_weixin.png" alt="微信登录图标" class="bg3">
        </div>
        <div class="checked" id="agreeWrapper">
            <div class="check" id="agreeCheck"></div>
            <p>阅读并同意游侠客的<span class="w4">《服务协议》</span>和<span class="w4">《隐私政策》</span>，未注册手机号将自动注册</p>
        </div>
    </div>
    <div class="bottom">
        体验游侠客微信小程序
        <img class="bg2" src="./img/z_tixian.png" alt="箭头图标"> 
    </div>
</body>
<script src="./js/reset.js"></script>
<script>
    
    const phoneInput = document.getElementById('phone');
    const codeInput = document.getElementById('code');
    const loginBtn = document.getElementById('loginBtn');
    const phoneError = document.getElementById('phoneError');
    const codeError = document.getElementById('codeError');
    const agreeCheck = document.getElementById('agreeCheck');
    const agreeWrapper = document.getElementById('agreeWrapper');
    const getCodeBtn = document.getElementById('getCodeBtn');
    
    // 手机号正则：158/155/191开头的11位数字
    const phoneRegex = /^(158|155|191)\d{8}$/;
    // 验证码正则：6位数字
    const codeRegex = /^\d{6}$/;
    
    function checkInputs() {
        if (!phoneInput || !codeInput || !loginBtn || !agreeCheck) return;
        
        const phoneValue = phoneInput.value.trim();
        const codeValue = codeInput.value.trim();
        const isPhoneValid = phoneRegex.test(phoneValue);
        const isCodeValid = codeRegex.test(codeValue);
        const isAgreed = agreeCheck.classList.contains('nocheck');
        
        if (isPhoneValid && isCodeValid && isAgreed) {
            loginBtn.classList.add('active');
            loginBtn.removeAttribute('disabled');
        } else {
            loginBtn.classList.remove('active');
            loginBtn.setAttribute('disabled', 'disabled');
        }
        if (phoneValue && !isPhoneValid) {
            phoneError.textContent = '请输入158/155/191开头的11位手机号';
        } else {
            phoneError.textContent = '';
        }
        if (codeValue && !isCodeValid) {
            codeError.textContent = '请输入6位数字验证码';
        } else {
            codeError.textContent = '';
        }
        getCodeBtn.style.pointerEvents = isPhoneValid ? 'auto' : 'none';
        getCodeBtn.style.opacity = isPhoneValid ? '1' : '0.6';
    }
    
    function handleInputFocus() {
        this.classList.remove('error');
        const errorId = this.id + 'Error';
        document.getElementById(errorId).textContent = '';
    }
    
    function handleInputBlur() {
        checkInputs();
    }
    
    if (phoneInput) {
        phoneInput.addEventListener('focus', handleInputFocus);
        phoneInput.addEventListener('blur', handleInputBlur);
        phoneInput.addEventListener('input', checkInputs);
    }
    
    if (codeInput) {
        codeInput.addEventListener('focus', handleInputFocus);
        codeInput.addEventListener('blur', handleInputBlur);
        codeInput.addEventListener('input', checkInputs);
    }
    agreeWrapper.addEventListener('click', function() {
        agreeCheck.classList.toggle('check');
        agreeCheck.classList.toggle('nocheck');
        checkInputs();
    });
    
    getCodeBtn.addEventListener('click', function() {
        const phoneValue = phoneInput.value.trim();
        if (!phoneRegex.test(phoneValue)) return;
        
        let seconds = 60;
        this.textContent = `重新获取(${seconds}s)`;
        this.style.pointerEvents = 'none';
        this.style.opacity = '0.6';
        
        const timer = setInterval(() => {
            seconds--;
            if (seconds <= 0) {
                clearInterval(timer);
                this.textContent = '获取验证码';
                this.style.pointerEvents = 'auto';
                this.style.opacity = '1';
            } else {
                this.textContent = `重新获取(${seconds}s)`;
            }
        }, 1000);
        
        console.log('发送验证码到:', phoneValue);
    });
  
    loginBtn.addEventListener('click', function() {
        if (!this.disabled) {
           
            localStorage.setItem('isLoggedIn', 'true');
            
            
            const redirectUrl = localStorage.getItem('redirectUrl') || 'order_z.html';
            
            localStorage.removeItem('redirectUrl');
            
            window.location.href = redirectUrl;
        }
    });
    checkInputs();
</script>
</html>